// setting模块是控制页面区域 sidebarlogo的的展示 navbar头部固定
import defaultSettings from '@/settings'
import { getTheme, setTheme, removeTheme } from '@/utils/auth'

const { showSettings, fixedHeader, sidebarLogo, theme } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  // 颜色默认值优先从本地获取, 获取不到再渲染默认值
  theme: getTheme() || theme
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // key "theme" value: '色值'
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) { // hasOwnProperty这个方式是检测对象中是否有某个属性
      state[key] = value
    }
    // 将主题色存储在vuex中
    if (key === 'theme') {
      setTheme(value)
    }
  },
  // 清空并重置主题色的mutation
  resetTheme(state) {
    // 1. 将本地存储中的theme也清除
    removeTheme()
    // 2. 清除vuex中的theme数据,设置为默认值
    state.theme = theme
  }
  // 自己写的修改theme主题色mutation
  // setTheme(state, val) {
  //   state.theme = val
  // }
}

const actions = {
  changeSetting({ commit }, data) {
    // console.log(data)
    commit('CHANGE_SETTING', data)
  }
}
// 以上封装的action和mutation是可以复用的, 只要项修改state中 的数据 只需要提交这个action就可以了 {key:xx, value:xx}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

